import {
  getMultiDate,
  getGoodsDate
} from '../../service/home'

import {
  POP,
  SELL,
  NEW,
  BACK_TOP_POSITION
} from '../../common/const.js'

Page({
  data: {
    swiperList: [], // 轮播图数据
    recommends: [], // 推荐数据
    titles: ['流行', '新款', '精选'],
    goods: {
      [POP]: { page: 0, list: [] },
      [NEW]: { page: 0, list: [] },
      [SELL]: { page: 0, list: [] }
    },
    currentType: POP, //默认展示
    showBackTop: false, // 控制返回顶部按钮
    showTabControl: false, // 控制吸顶
    tabControlTop: 0 // 组件距离顶部距离
  },
  onLoad: function (options) {
    // 1.请求轮播图及推荐数据
    this._getMultiDate()

    // 2.请求商品数据
    this._getGoodsDate('pop')
    this._getGoodsDate('new')
    this._getGoodsDate('sell')
  },

  // 页面滚动到底部的钩子函数
  onReachBottom(){
    // 上拉加载更多
    this._getGoodsDate(this.data.currentType)
  },
  // 页面滚动钩子
  onPageScroll(options){
    // console.log(options)
    // 1.取出scrollTop
    const scrollTop = options.scrollTop

    // 2.修改控制显示的showBackTop
    // 官方：不用再滚动的函数中频繁的调用this.setData 所有可以加节流阀提高性能
    const flag = scrollTop >= BACK_TOP_POSITION
    if(flag !==this.data.showBackTop){
      this.setData({
        showBackTop: flag
      })
    }
    
    // 3.吸顶效果
    // 根据tabControlTop修改showTabControl
    const flag1 = scrollTop >= this.data.tabControlTop
    if(flag1 !==this.data.showTabControl){
      this.setData({
        showTabControl: flag1
      })
    }
  },
  // -------------------------请求数据函数-------------------------
  _getMultiDate() {
    getMultiDate().then(res => {
      // console.log(res)
      // 获取轮播图和推荐数据
      const swiperList = res.data.data.banner.list
      const recommends = res.data.data.recommend.list

      // 数据保存到对象中
      this.setData({
        swiperList,
        recommends
      })
    })
  },
  _getGoodsDate(type) {
    // 1.取出page
    const page = this.data.goods[type].page + 1
    // 2.发送请求数据
    getGoodsDate(type, page).then(res => {
      // console.log(res)
      // 2.1 取出数据
      const list = res.data.data.list

      // 2.2 将数据设置到对应的type里list中
      const oldList = this.data.goods[type].list
      oldList.push(...list)

      // 2.3 把数据放入goods对应类型的list里
      const typeKey = `goods.${type}.list`
      const pageKey = `goods.${type}.page`
      this.setData({
        [typeKey]: oldList,
        [pageKey]: page
      })
    })
  },
  // ------------------------逻辑操作函数--------------------------
  // tab-contorl吸顶效果
  handleImageLoad(){
    // 组件距离顶部距离
    wx.createSelectorQuery().select('#tab-control').boundingClientRect((rect)=>{
      this.setData({
        tabControlTop: rect.top
      })
    }).exec()
  },
  // nav切换
  handleTabClick(e) {
    // console.log(e)
    // 1.获取index
    const index = e.detail.index
    const types = [POP, NEW, SELL]
   
    // 2.展示对应商品(修改currentType即可)
    this.setData({
      currentType:  types[index]
    })
  }
})